<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Change settings</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
	window.jQuery || document.write('<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery/jquery-2.1.3.js"><\/script>');
</script>
<script type="text/javascript">
	$(document).ready(function(){
		
		var $showCategory = $('#showCategory');
		var $hideCategory = $('#hideCategory');
		var $showAdvertiser = $('#showAdvertiser');
		var $hideAdvertiser = $('#hideAdvertiser');
		
		toggleSubmitEnable($showCategory);
		toggleSubmitEnable($hideCategory);
		toggleSubmitEnable($showAdvertiser);
		toggleSubmitEnable($hideAdvertiser);
		
		$showCategory.submit(function (ev) {
			handleAjaxCall(this, $hideCategory);
	        ev.preventDefault();
		});		
		
		$hideCategory.submit(function (ev) {
			handleAjaxCall(this, $showCategory);
	        ev.preventDefault();
		});

		$showAdvertiser.submit(function (ev) {
			handleAjaxCall(this, $hideAdvertiser);
	        ev.preventDefault();
		});

		$hideAdvertiser.submit(function (ev) {
			handleAjaxCall(this, $showAdvertiser);
	        ev.preventDefault();
		});
	});
		
	function handleAjaxCall(form, opositeForm) {
		
		var $select = $(form).find('select');
		var $selectOposite = $(opositeForm).find('select');
		var $selectedOption = $(form).find('option:selected');
		
		$.ajax({
            type: $(form).attr('method'),
            url: $(form).attr('action'),
           	data: {
           		'id' : $selectedOption.val(),
           	},
			success : function() {
				var $isLastOption = $(form).find('select option');
				if ($isLastOption.length == 1) {
			 		var noOption = new Option('-- No more --', '-1');
					$select.append(noOption);
				}
				
				var $selectedOption = $(form).find('option:selected');
				$selectOposite.append($selectedOption);
				var $noOptionExists = $selectOposite.find('option[value="-1"]');
				if ($noOptionExists.length == 1) {
					$noOptionExists.remove();
				}
				
				toggleSubmitEnable($(form));
				toggleSubmitEnable($(opositeForm));
			},
			error : function(xhr, ajaxOptions, thrownError) {
				alert('error... ' + xhr.responseText);
			}
		});
	};
	
	// enable or disable submit button on form if <select> tag is empty	
	function toggleSubmitEnable(form) {
		var $selectEmpty = $(form).find('select option[value="-1"]');
		var $input = $(form).find('input[type="submit"]');
		
		if ($selectEmpty.length == 1) {
			$input.attr('disabled', 'disabled');
		} else {
 			$input.removeAttr('disabled');
		}
	};
	
	
</script>
</head>
<body>

	<form:form id="showCategory" action="${pageContext.request.contextPath}/agents/settings/showOrHideCategory" method="POST" commandName="dto">
		<form:label path="hiddenCategories">Hidden categories</form:label>
		<form:select path="hiddenCategories" multiple="false">
			<c:if test="${ empty dto.hiddenCategories }">
				<form:option value="-1">-- No more --</form:option>
			</c:if>
			<c:forEach items="${ dto.hiddenCategories }" var="currentCategory">
				<form:option value="${ currentCategory.id }">
					<c:out value="${ currentCategory.name }"></c:out>
				</form:option>
			</c:forEach>
		</form:select>
		<input type="submit" value="Show selected category">
	</form:form>
	
	<br />
	
	<form:form id="hideCategory" action="${pageContext.request.contextPath}/agents/settings/showOrHideCategory" method="POST" commandName="dto">
		<form:label path="shownCategories">Categories</form:label>
		<form:select path="shownCategories" multiple="false">
			<c:if test="${ empty dto.shownCategories }">
				<form:option value="-1">-- No more --</form:option>
			</c:if>
			<c:forEach items="${ dto.shownCategories }" var="currentCategory">
				<form:option value="${ currentCategory.id }">
					<c:out value="${ currentCategory.name }"></c:out>
				</form:option>
			</c:forEach>
		</form:select>
		<input type="submit" value="Hide selected category">
	</form:form>
	
	<br />
	
	<form:form id="showAdvertiser" action="${pageContext.request.contextPath}/agents/settings/showOrHideAdvertiser" method="POST" commandName="dto">
		<form:label path="hiddenAdvertisers">Hidden advertisers</form:label>
		<form:select path="hiddenAdvertisers" multiple="false">
			<c:if test="${ empty dto.hiddenAdvertisers }">
				<form:option value="-1">-- No more --</form:option>
			</c:if>
			<c:forEach items="${ dto.hiddenAdvertisers }" var="currentAdvertiser">
				<form:option value="${ currentAdvertiser.id }">
					<c:out value="${ currentAdvertiser.username }"></c:out>
				</form:option>
			</c:forEach>
		</form:select>
		<input type="submit" value="Show selected advertiser" >
	</form:form>
	
	<br />
	
	<form:form id="hideAdvertiser" action="${pageContext.request.contextPath}/agents/settings/showOrHideAdvertiser" method="POST" commandName="dto">
		<form:label path="shownAdvertisers">Advertisers</form:label>
		<form:select path="shownAdvertisers" multiple="false">
			<c:if test="${ empty dto.shownAdvertisers }">
				<form:option value="-1">-- No more --</form:option>
			</c:if>
			<c:forEach items="${ dto.shownAdvertisers }" var="currentAdvertiser">
				<form:option value="${ currentAdvertiser.id }">
					<c:out value="${ currentAdvertiser.username }"></c:out>
				</form:option>
			</c:forEach>
		</form:select>
		<input type="submit" value="Hide selected advertiser" >
	</form:form>

</body>
</html>